import React, { Component } from 'react'
import { Link } from "react-router-dom";
import '../../static/css/tool.less'
import { withRouter } from "react-router-dom";
import { NavBar, Icon } from "antd-mobile";

class Navigation extends Component {
    // eslint-disable-next-line no-useless-constructor
    constructor(props) {
        super(props);
    }
    render() {
        console.log(this.$store.getState())
        return (
            this.$store.getState().deviceType === 'pc' ?
                <div className="navigation">
                    <div className='leftMenu'>
                        <div onClick={() => this.props.history.push('/index')}>
                            <img src='' alt='alt' />
                            <p>原野文学社</p>
                        </div>
                        <span />
                        <span />
                        <Link to="/article/list">文章中心</Link>
                        <span>|</span>
                        <Link to="/activity/list">活动中心</Link>
                        {/*   如果登录之后，则可以发布文章*/}
                    </div>
                    {/*{*/}
                    {/*    this.state.type === 'pc' ? (*/}
                    <div className='rightMenu'>
                        <Link to="/login" >登录</Link>
                        <span>|</span>
                        <Link to="/register">注册</Link>
                    </div>
                    {/*    ) : (*/}
                    {/*        <div className='rightMenu'>*/}
                    {/*            <Link to="/m/login" >登录</Link>*/}
                    {/*            <span>|</span>*/}
                    {/*            <Link to="/m/register">注册</Link>*/}
                    {/*        </div>*/}
                    {/*    )*/}

                    {/*}*/}
                </div>
                :
                // 移动
                <NavBar
                    mode="light"
                    size="xs"
                    style={{ display: 'inline-block', height: '20em' }}
                    icon={<Icon type="left" style={{ width: '5em' }} />}
                    onLeftClick={() => console.log('onLeftClick')}
                    rightContent={[
                        <Icon key="0" type="search" style={{ marginRight: '16em', width: '5em' }} />,
                        <Icon key="1" type="ellipsis" style={{ width: '5em' }} />,
                    ]}
                >NavBar</NavBar>

        )
    }
}

export default withRouter(Navigation)
